<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人简介</title>
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="swiper-4.5.0/dist/css/swiper.min.css">
</head>
<body>
<div class="header-inner">
    <div class="header clearfix">
        <div class="logo">
            <div class="logo-left">
                <img src="img/logo.jpg" alt="">
            </div>
            <div class="logo-right">
                <p>Hu ChenXi</p>
                <span>个人主页</span>
            </div>
        </div>
        <div class="nav">
            <ul class="ul">
                <li class="btn1" id="btn1"><a href="">首页</a></li>
                <li><a href="">我的简历</a></li>
                <li><a href="">我的UI</a></li>
                <li><a href="">javascript</a></li>
                <li><a href="">博客</a></li>
                <li><a href="">前端导航</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="main-inner">
    <div class="main">
        <div class="main-first" id="d1">
            <div class="container">
                <div class="first-1 clearfix" id="div1">
                    <img src="img/2.jpeg" alt="" class="img-1">
                    <img src="img/3.jpg" alt="" class="img-2">
                </div>
                <div class="first-2">
                    <p>人生就是一道坡，只有不懈攀登，才能到达顶坡，实现自我的最高价值</p>
                </div>
                <div class="first-3">
                    <p>我叫胡晨曦</p>
                    <p>19岁</p>
                    <p>web前端在校学员</p>
                    <p>手机：15128721628</p>
                    <p>QQ：2943808282</p>
                </div>
            </div>
            
        </div>
        <div class="main-about" id="d2">
                <div class="about-1">
                    <h2>关于我</h2>
                    <p>-ABOUT ME-</p>
                </div>
                <div class="about-2">
                  <ul class="clearfix">
                      <li class="a-1">
                          <div class="in-1">
                              <img src="img/education.png" alt="" class="a-img">
                              <span class="in"></span>
                              <span class="in-hover"></span>
                          </div>
                          <div class="in-2">
                              <span>学历</span>
                              <span></span>
                              <span>大专</span>
                          </div>
                      </li>
                      <li class="a-2">
                          <div class="in-1">
                              <img src="img/age.png" alt="" class="d-1">
                              <span class="in"></span>
                              <span class="in-hover"></span>
                          </div>
                          <div class="in-2">
                              <span>年龄</span>
                              <span></span>
                              <span>19</span>
                          </div>
                      </li>
                      <li class="a-3">
                          <div class="in-1">
                              <img src="img/location.png" alt="" class="d-2">
                              <span class="in"></span>
                              <span class="in-hover"></span>
                          </div>
                          <div class="in-2">
                              <span>籍贯</span>
                              <span></span>
                              <span>河北  沧州</span>
                          </div>
                      </li>
                      <li class="a-4">
                          <div class="in-1">
                              <img src="img/status.png" alt="" class="d-3">
                              <span class="in"></span>
                              <span class="in-hover"></span>
                          </div>
                          <div class="in-2">
                              <span>目前</span>
                              <span></span>
                              <span>在校</span>
                          </div>
                      </li>
                  </ul>
                </div>
                <div class="about-3">
                    <span></span>
                    <span></span>
                    <p>2018年进入泊头师范学院成为盛邦升华计算机系的一名学员</p>
                    <p>现正在攻读web前端专业部分</p>
                    <p>2019年在外找工作实习</p>
                </div>
        </div>
        <div class="main-skill" id="d3">
                <div class="about-1">
                    <h2>专业技能</h2>
                    <p>-SKILL-</p>
                </div>
                <div class="skill-2">
                    <p>IT技术的学习需要持之以恒，对知识的认识深度与广度都很重要。对于前端而言更是如此，近几年前端框架层出不穷，前端技术已经从单纯的静态页面开发慢慢转变成mvc、mvvc等架构
                       <span>型开发，前端工程师正在渐渐向全栈工程师转变，前端开发的重中之重依然是javascript脚本的理解与应用，目前正在不断深入学习javascript知识。</span>
                    </p>
                </div>
            <div class="skill-3">
                <ul class="clearfix">
                    <li id="li" onclick="a()">
                    <div class="skill-top">
                        <a href="javascript:">
                            <img src="img/html.png" alt="">
                        </a>
                        <span>HTML</span>
                        <i><img src="img/skill_flag.png" alt="" id="i"></i>
                    </div>
                    <div class="skill-bottom" id="skill">
                        <p>· 熟练HTML/XHTML标签语意</p>
                        <p>· 深刻理解web标准</p>
                        <p>· 熟练div+css、熟悉盒模型和各类布局方式、能够根据设计图高效实现页面布局和交互效果</p>
                        <p>· 精通pc、wap页面开发</p>
                    </div>
                </li>
                    <li id="li-1" onclick="b()">
                        <div class="skill-top">
                            <a href="javascript:">
                                <img src="img/css.png" alt="">
                            </a>
                            <span>CSS</span>
                            <i><img src="img/skill_flag.png" alt="" id="i-1"></i>
                        </div>
                        <div class="skill-bottom" id="skill-1">
                            <p>· 熟练掌握css及css3新属性及用法、低版本IE浏览器兼容处理；</p>
                            <p>· 熟悉浏览器兼容性处理方法，熟练掌握响应式网页开发原理；</p>
                            <p>· 熟悉css3 font-face技术，制作并积累了部分常用font-face图标；</p>
                            <p>· 熟练掌握css预编译器Less及Sass技术；</p>
                            <p>· 掌握BootStrap框架，实践过响应式布局；</p>
                        </div>
                    </li>
                    <li  id="li-2" onclick="c()">
                        <div class="skill-top">
                            <a href="javascript:">
                                <img src="img/js.png" alt="">
                            </a>
                            <span>Java Script</span>
                            <i><img src="img/skill_flag.png" alt="" id="i-2"></i>
                        </div>
                        <div class="skill-bottom" id="skill-2">
                            <p>· 熟悉javascript，以及jquery、zepto、swiper等常见框架使用</p>
                            <p>· 熟练掌握javascript Ajax交互开发原理</p>
                            <p>· 能进行常规WEB页面特效的开发</p>
                            <p>· 正在学习vue Js框架技术</p>
                        </div>
                    </li>
                    <li  id="li-3" onclick="d()">
                        <div class="skill-top">
                            <a href="javascript:">
                                <img src="img/skill.png" alt="">
                            </a>
                            <span>SKILL</span>
                            <i><img src="img/skill_flag.png" alt="" id="i-3"></i>
                        </div>
                        <div class="skill-bottom" id="skill-3">
                            <p>· 熟练使用firebug，chrome调试工具调试代码</p>
                            <p>· 了解网页SEO知识</p>
                            <p>· 熟练使用ps,sublime，webstrom等工具进行前端页面手工式开发</p>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
        <div class="main-major" id="d4">
            <div class="about-1">
                <h2>专业技能</h2>
                <p>-SKILL-</p>
            </div>
            <div class="major-1">
                <ul class="clearfix">
                    <li class="clearfix">
                        <div class="m-1 clearfix">
                            <div class="m-top">
                                <span>HTML</span>
                            </div>
                            <div class="m-border">
                                <span>95%</span>
                            </div>
                        </div>
                        <div class="m-2">
                            <p>深刻理解web标准，熟悉html5新标签语意，能合理利用语意标签布局页面；</p>
                        </div>
                    </li>
                    <li class=" te-1 clearfix">
                        <div class="m-1 clearfix">
                            <div class="m-top">
                                <span>CSS</span>
                            </div>
                            <div class="m-b">
                                <span>90%</span>
                            </div>
                        </div>
                        <div class="m-2">
                            <p>熟悉css3新特性属性及相关用法，有一定开发经验；了解css预编译语言less/sass；</p>
                        </div>
                    </li>
                    <li class=" te-2 clearfix">
                        <div class="m-1 clearfix">
                            <div class="m-top">
                                <span>JavaScript</span>
                            </div>
                            <div class="m-bo">
                                <span>70%</span>
                            </div>
                        </div>
                        <div class="m-2">
                            <p>熟悉JavaScript编程语言</p>
                        </div>
                    </li>
                    <li class=" te-3 clearfix">
                        <div class="m-1 clearfix">
                            <div class="m-top">
                                <span>Jquery</span>
                            </div>
                            <div class="bo-1">
                                <span>85%</span>
                            </div>
                        </div>
                        <div class="m-2">
                            <p>熟练掌握jqurey开发页面特效，提高页面开发效率；</p>
                        </div>
                    </li>
                    <li class=" te-4 clearfix">
                        <div class="m-1 clearfix">
                            <div class="m-top">
                                <span>Vue.js</span>
                            </div>
                            <div class="bo-2">
                                <span>50%</span>
                            </div>
                        </div>
                        <div class="m-2">
                            <p>正在学习(暂无开发经验)</p>
                        </div>
                    </li>
                    <li class=" te-5 clearfix">
                        <div class="m-1 clearfix">
                            <div class="m-top">
                                <span>Ajax</span>
                            </div>
                            <div class="bo-3">
                                <span>75%</span>
                            </div>
                        </div>
                        <div class="m-2">
                            <p>熟悉JavaScript、Ajax、Jsonp、DOM等前端技术，熟练应用ajax技术与后端数据进行交互处理；</p>
                        </div>
                    </li>
                    <li class=" te-6 clearfix">
                        <div class="m-1 clearfix">
                            <div class="m-top">
                                <span>Bootstrap</span>
                            </div>
                            <div class="bo-4">
                                <span>80%</span>
                            </div>
                        </div>
                        <div class="m-2">
                            <p>熟练掌握bootstrap框架及源码的使用方法；</p>
                        </div>
                    </li>
                    <li class=" te-7 clearfix">
                        <div class="m-1 clearfix">
                            <div class="m-top">
                                <span>Swiper</span>
                            </div>
                            <div class="bo-5">
                                <span>70%</span>
                            </div>
                        </div>
                        <div class="m-2">
                            <p>熟练使用Swiper框架开发页面动画效果，有一定开发经验；</p>
                        </div>
                    </li>
                    <li class=" te-8 clearfix">
                        <div class="m-1 clearfix">
                            <div class="m-top">
                                <span>Php</span>
                            </div>
                            <div class="bo-6">
                                <span>30%</span>
                            </div>
                        </div>
                        <div class="m-2">
                            <p>熟悉简单php语句；</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="main-works" id="d5">
            <div class="about-1">
                <h2>作品展示</h2>
                <p>-WORKS-</p>
            </div>
           <div class="works-1 clearfix">
               <div class="wo-1">
                   <h3>云巴网页</h3>
                   <div class="wo-1-1">
                       <p>云巴-是一个物联网实时通讯云服务</p>
                       <p>本网页中应用了Bootstrap前端框架</p>
                       <p>使得开发者可以方便的让网页无论在台式机、平板设备、手机上都获得最佳的体验.</p>
                   </div>
                   <a href="http://cvcvdfdsfs.gitee.io/tengxunwang">
                       <img src="img/lianjie.png" alt="">
                   </a>
               </div>
               <div class="wo-2">
                   <h3>腾讯网页</h3>
                   <div class="wo-1-1">
                       <p>主要内容为腾讯新闻科技频道</p>
                       <p>通过html+css3构造出完整的网页架构</p>
                   </div>
                   <a href="http://cvcvdfdsfs.gitee.io/tengxunwang">
                       <img src="img/lianjie.png" alt="">
                   </a>
               </div>
               <div class="wo-3">
                   <h3>天涯明月刀网页</h3>
                   <div class="wo-1-1">
                       <p>这是一款国风大世界手游，带你走入仙侠的世界</p>
                       <p>本网页多处采用了过渡加动画的效果，可以给用户带来更多的体验</p>
                   </div>
                   <a href="http://cvcvdfdsfs.gitee.io/tianya_mingyue_knife">
                       <img src="img/lianjie.png" alt="">
                   </a>
               </div>
               <div class="wo-4">
                   <h3>三草两木网站</h3>
                   <div class="wo-1-1">
                       <p>三草两木（SASELOMO）自然、纯粹、欣生！将传
                           统美学文化与自然护理念相结合，用心研制纯净、自然、
                           有效的护肤品
                       </p>
                       <p>本网站应用了swiper插件中的轮播，多处的js效果，让用户的体验升级</p>
                   </div>
                   <a href="http://cvcvdfdsfs.gitee.io/dabian">
                       <img src="img/lianjie.png" alt="">
                   </a>
               </div>
           </div>

        </div>
        <div class="main-contact" id="d6">
            <div class="container">
                <div class="about-1">
                    <h2>联系我</h2>
                    <p>-CONTACT ME-</p>
                </div>
                <div class="con">
                    <h1>灵感 代码 梦想 未来</h1>
                </div>
                <div class="con-1">
                    <span>INSPIRATION</span>
                    <span>CORE</span>
                    <span>DREAM</span>
                    <span>FUTURE</span>
                </div>
                <div class="con-2">
                    <p>互联网是个奇妙的行业，</p>
                    <p>身为前端工程师，更贴近用户，这种体验非常美妙</p>
                    <p>我热爱互联网，更热爱互联网前端技术，</p>
                    <p>三人行，必有我师，</p>
                    <p>让我们在互联网的浪潮里一起不断成长！</p>
                    <p>手机：15128721628</p>
                    <p>QQ：2943808282</p>
                </div>
            </div>
        </div>
    </div>
    </div>

<div class="dian" id="yu">
    <ul>
        <li><a href="#d1" class="active"></a></li>
        <li><a href="#d2"></a></li>
        <li><a href="#d3"></a></li>
        <li><a href="#d4"></a></li>
        <li><a href="#d5"></a> </li>
        <li><a href="#d6"></a> </li>
    </ul>

</div>
<div class="main-last">
    <div class="footer">Copyright © 2015 - 2026 hu chenxi 2015.com 所有 <a href="http://www.miitbeian.gov.cn">粤ICP备17012254号</a></div>
</div>
<script src="swiper-4.5.0/dist/js/swiper.min.js"></script>
<script src="script.js"></script>
</body>
</html>